<!--
 * Description: input 组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/06/17 16:25
-->

<template>
  <div class="base-input">
    <el-input v-bind="$attrs" :value="value" @blur="blurEvent" @input="inputEvent" />
  </div>
</template>
<script>
export default {
  name: 'BaseInput',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    precision: {
      type: Number,
      default: 0
    }
  },
  computed: {
    precisionNum() {
      let num = 1

      for (let i = 0; i < this.precision; i++) {
        num = num * 10
      }

      return num
    }
  },
  methods: {
    inputEvent(val) {
      this.$emit('input', val)
    },
    blurEvent(e) {
      let val = e.target.value
      // 得到第一个字符是否为负号
      var t = val.charAt(0)
      // 先把非数字的都替换掉，除了数字和.
      val = val.replace(/[^\d\.]/g, '')
      // 必须保证第一个为数字而不是.
      val = val.replace(/^\./g, '')
      // 保证只有出现一个.而没有多个.
      val = val.replace(/\.{2,}/g, '.')
      // 保证.只出现一次，而不能出现两次以上
      val = val
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      // 如果第一位是负号，则允许添加
      if (t === '-') {
        val = '-' + val
      }

      // eslint-disable-next-line
      if (this.$attrs.hasOwnProperty('min') && this.$attrs.hasOwnProperty('max')) {
        if (String(val).length > 0) {
          if (Number(val) >= Number(this.$attrs.max)) {
            if (Number(val) >= 10000000000) {
              this.$emit('input', '9999999999.999999999')
            } else {
              this.$emit('input', this.$attrs.max)
            }
          } else if (Number(val) <= Number(this.$attrs.min)) {
            this.$emit('input', this.$attrs.min)
          } else {
            this.$emit('input', this.completeZero(val))
          }
        } else {
          this.$emit('input', '')
        }
        // eslint-disable-next-line
      } else if (this.$attrs.hasOwnProperty('min')) {
        if (String(val).length > 0) {
          if (Number(val) <= Number(this.$attrs.min)) {
            this.$emit('input', this.$attrs.min)
          } else {
            this.$emit('input', this.completeZero(val))
          }
        } else {
          this.$emit('input', '')
        }
        // eslint-disable-next-line
      } else if (this.$attrs.hasOwnProperty('max')) {
        if (String(val).length > 0) {
          if (Number(val) >= Number(this.$attrs.max)) {
            if (Number(val) >= 10000000000) {
              this.$emit('input', '9999999999.999999999')
            } else {
              this.$emit('input', this.$attrs.max)
            }
          } else {
            this.$emit('input', this.completeZero(val))
          }
        } else {
          this.$emit('input', '')
        }
      } else {
        if (String(val).length > 0) {
          this.$emit('input', this.completeZero(val))
        } else {
          this.$emit('input', '')
        }
      }
    },
    // 补齐
    completeZero(val) {
      const res = String(val).split('.')
      // 存在小数点
      if (res.length > 1) {
        if (res[1].length === this.precision) {
          // 小数点正好
          return val
        } else if (res[1].length > this.precision) {
          // 小数点超出
          return String(res[0]) + '.' + String(res[1]).substr(0, this.precision)
        } else {
          // 小数点未超出
          const restZeroLength = Number(this.precision) - res[1].length
          const restZeroString = String(this.precisionNum).substr(1, restZeroLength)
          return String(val) + restZeroString
        }
      } else {
        return Number(val).toFixed(this.precision)
      }
    }
  }
}
</script>
